import type { InputProps } from 'antd';
import { Input, Space } from 'antd';
import { useEffect, useRef, useState } from 'react';

interface Props extends InputProps {
  textContent?: string;
  onChange?: (e: any) => void;
  children?: React.ReactNode;
}

const InputRender: React.FC<Props> = (props) => {
  const { textContent, onChange, children, ...rest } = props;

  const ref = useRef(null);

  const [inputValue, setInputValue] = useState<string>('');

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
    onChange?.(e);
  };

  const handleInputConfirm = (e: any) => {
    onChange?.(e);
  };

  useEffect(() => {
    textContent && setInputValue(textContent);
  }, [textContent]);
  return (
    <Space style={{ display: 'flex', alignItems: 'center' }}>
      <Input
        {...rest}
        ref={ref}
        allowClear
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        onBlur={handleInputConfirm}
        onPressEnter={handleInputConfirm}
      />
      {children ?? null}
    </Space>
  );
};

export default InputRender;
